<template>
	<view id="app">
		<!-- 功能区 -->
		<view class="fnArea rows ptb30 plr30 cw bw">
			<!-- 商品分类 -->
			<picker :value="ti" :range="typeList" range-key="name" class="f1" @change="changeType">
				<view class="bar1 df dfc aic area ptb35 ">
					<view class="df aic">
						<view class="img wh35">
							<image src="/static/proset1.png" mode="aspectFit"></image>
						</view>
						<view class="txt ml10 f32">
							<text v-if="ti == 0">商品分类</text>
							<text v-else>{{typeList[ti].name}}</text>
						</view>
					</view>
				</view>
			</picker>

			<!-- 发布 -->
			<navigator hover-class="none" url="/pages/my/shop/release?edit=true" class="bar2 df dfc aic area f1 ml30 ptb35">
				<view class="df aic">
					<view class="img wh35">
						<image src="/static/proset2.png" mode="aspectFit"></image>
					</view>
					<view class="txt ml10 f32">发布</view>
				</view>
			</navigator>
		</view>

		<!-- 订单列表 -->
		<scroll-view scroll-X class="navBar" enable-flex>
			<view class="nav" :class="index == current ? 'active' : ''" v-for="(item,index) in topNav" :key="index" @click="change(index)">
				<view class="item">
					<view class="txt">{{item.name}}</view>
					<view class="line"></view>
				</view>
			</view>
		</scroll-view>

		<!-- 列表 -->
		<view class="order mlr30 mt30">

			<!-- 订单列表 -->
			<navigator hover-class="none" :url="'/pages/my/shop/release?id=' + item.id" class="list area mb30 pt10 plr25" @click="toDetail(item)" v-for="(item,index) in list" :key="index">
				<!-- 上 -->
				<view class="top rows ptb15 bdb1se f28">
					<!-- 订单状态 -->
					<view class="state c333">{{item.status_text}}</view>
				</view>
				<!-- 内容 -->
				<view class="mid df ais ptb20 bdb1se">
					<!-- 商品图片 -->
					<view class="proImg img180">
						<image :src="item.images[0]" mode="aspectFill" lazy-load></image>
					</view>
					<!-- 商品信息 -->
					<view class="proInfo df dfc dfsb oh ml20 f1">
						<!-- 商品名称 -->
						<view class="title t2hd f28 c333 b">{{item.name}}</view>
						<!-- 类型 -->
						<view class="type c999 f28">{{item.categoryData.name}}</view>
						<!-- 其他 -->
						<view class="other c333 f28 cff9646">￥{{item.price}}</view>
					</view>
				</view>

				<!-- 驳回原因 -->
				<view class="reason cFF7B24 f28 ptb20 bdb1se" v-if="item.reason">
					驳回原因：{{item.reason}}
				</view>

				<!-- 上架中 -->
				<view class="botFn df dfr ptb20" v-if="item.status == 1">
					<view class="mr30">
						<view class="btn cancel w150" @click.stop="toEdit(item)">编辑产品</view>
					</view>
					<view class="mr30">
						<view class="btn cancel w150" @click.stop="changeShelf(index)">下架</view>
					</view>
					<view>
						<view class="btn prmary w200">商品详情</view>
					</view>
				</view>

				<!-- 下架中 -->
				<view class="botFn df dfr ptb20" v-else-if="item.status == 2">
					<view class="mr30">
						<view class="btn cancel w150" @click.stop="delPro(index)">删除商品</view>
					</view>
					<view class="mr30">
						<view class="btn cancel w150" @click.stop="changeShelf(index)">上架</view>
					</view>
					<view>
						<view class="btn prmary w200">商品详情</view>
					</view>
				</view>

				<!-- 被驳回 -->
				<view class="botFn df dfr ptb20" v-else-if="item.status == 4">
					<view class="mr30">
						<view class="btn cancel w150" @click.stop="toEdit(item)">编辑产品</view>
					</view>
					<view class="mr30">
						<view class="btn cancel w150" @click.stop="delPro(index)">删除商品</view>
					</view>
					<view>
						<view class="btn prmary w150">商品详情</view>
					</view>
				</view>

				<!-- 其他 -->
				<view class="botFn df dfr ptb20" v-else>
					<view>
						<view class="btn prmary w150">商品详情</view>
					</view>
				</view>
			</navigator>

		</view>

	</view>
</template>
<script>
	// 定义全局变量that
	var that;
	export default {
		// 页面变量
		data() {
			return {
				// tab
				topNav: [{
						name: '全部',
						// status: '',
					},
					{
						name: '待审核',
						status: '3',
					},
					{
						name: '上架中',
						status: '1',
					},
					{
						name: '已下架',
						status: '2',
					},
				],
				// 下标
				current: 0,
				// 列表
				list: [],
				// 切换类型列表
				typeList: [{
					name: '全部',
				}, ],
				// 选择类型
				ti: 0,
			}
		},

		// 页面加载完成后
		onLoad(e) {
			that = this;

			// 判断类型
			if (e.type) {
				// 赋值下标
				that.current = Number(e.type) - 1;
			}

			// console.log(JSON.parse(uni.getStorageSync('config').categorytype));
			// 分类列表
			that.gatCate();
		},

		// 页面出现
		onShow() {
			// 订单列表
			that.getlist();
		},

		// 方法集
		methods: {
			// 去编辑
			toEdit(item){
				// 跳转页面
				uni.navigateTo({
					url: '/pages/my/shop/release?edit=true&id=' + item.id,
				})
			},
			
			// 获取分类
			gatCate() {
				// 请求接口 
				that.request({
					url: '',
					// 上传数据
					data: {
						// 列表
						table: 'category',
						// 类型
						type: 'goods',
					},
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 分类列表
							that.typeList.push(...rs.data);
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},

			// 订单列表
			getlist() {
				// 上传数据
				var data = {
					table: 'goods',
					mine: 1,
				};

				// 分类下标
				that.ti > 0 ? data.category_id = that.typeList[that.ti].id : '';

				// 商品状态
				that.current == 0 ? '' : data.status = that.topNav[that.current].status;

				// 请求接口 
				that.request({
					url: '',
					// 上传数据
					data: data,
					load: 1,
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 商品列表
							that.list = rs.data;
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},

			// 删除商品
			delPro(index) {
				// 弹窗提示
				that.alert({
					value: '确认删除商品？',
					success(rs) {
						// 判断是否点击确定
						if (rs.confirm) {
							// 内容
							var item = that.list[index];

							// 请求接口 
							that.request({
								url: '/api/index/handle',
								// 上传数据
								data: {
									table: 'goods',
									id: item.id,
									deletetime: Date.parse(new Date()) / 1000,
								},
								// 调用成功
								success(rs) {
									// 返回成功
									if (rs.code == 1) {
										// 弹窗提示
										that.alert('删除成功');

										// 删除商品
										that.list.splice(index, 1);
									} else {
										//弹窗提示用户
										that.alert(rs.msg);
									}
								}
							})
						}
					}
				});
			},

			// 更改上下架状态
			changeShelf(index) {
				// 内容
				var item = that.list[index];
				// 弹窗提示
				that.alert({
					value: item.status == 1 ? '确认下架商品？' : '确认上架该商品？',
					success(rs) {
						// 点击确定
						if (rs.confirm) {
							// 请求接口 
							that.request({
								url: '/api/index/handle',
								// 上传数据
								data: {
									table: 'goods',
									id: item.id,
									// 状态
									status: item.status == 1 ? 2 : 1,
								},
								load: 1,
								// 调用成功
								success(rs) {
									// 返回成功
									if (rs.code == 1) {
										// 弹窗提示
										that.alert('操作成功');

										// 更改状态
										item.status = item.status == 1 ? 2 : 1

										// 重新赋值刷新页面
										that.list = Object.assign([], that.list);
									} else {
										//弹窗提示用户
										that.alert(rs.msg);
									}
								}
							})

						}
					}
				});

			},

			// 切换条件
			changeType(e) {
				// 赋值下标
				that.ti = e.detail.value;

				// 订单列表
				that.getlist();
			},

			// 切换下标
			change(index) {
				// 判断是否相等
				if (that.current == index) {
					return;
				}

				// 赋值下标
				that.current = index;

				// 订单列表
				that.getlist();
			},

			// 跳转详情
			toDetail(item) {
				// 跳转页面
				uni.navigateTo({
					// url: '/pages/my/shop/release?id=' + item.order_id,
				})
			},
		},
	};
</script>
<style lang="less">
	@active: #FFA351;

	// 头部
	.fnArea {

		// 第一块
		.bar1 {
			background: linear-gradient(180deg, #93EECA 0%, #61D5AD 100%);
		}

		// 第二块
		.bar2 {
			background: linear-gradient(180deg, #FFDCA7 0%, #FEAE5F 100%);
		}
	}

	// 导航条
	.navBar {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		height: 100rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		white-space: nowrap;
		background-color: white;

		// 导航块
		.nav {
			display: inline-block;
			flex: 1;
			text-align: center;

			// 内容
			.item {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				padding: 20rpx 30rpx;

				// 文字
				.txt {
					color: #666;
					font-size: 30rpx;
					transition: .3s;
				}

				// 线
				.line {
					width: 0;
					height: 10rpx;
					margin: 15rpx auto 0;
					background-color: @active;
					border-radius: 100rpx;
					transition: .3s;
				}
			}
		}

		// 激活
		.active {

			// 项
			.item {

				// 文字
				.txt {
					color: @active;
				}

				// 线
				.line {
					width: 100%;
				}

			}
		}
	}

	// 订单
	.order {

		// 按钮
		.btn {
			padding-top: 15rpx;
			padding-bottom: 15rpx;
		}
	}
</style>
